<!-- 
	先考虑一下设计稿的结构，我一开始没看出来，这段dom结构需要仔细参考老师的意图；
		对比如果自己的实现有什么不足。
-->
<template>
	<div class="city-list better-scroll" ref="city-list">
		<!-- better-scroll-inner是根据better-scroll插件的要求改造的dom结构，
			better-scroll要求内部元素包含在一个dom结构中，这个节点本身没有任何样式控制
			实际上如果要熟练使用这个插件可以在开发设计时候就考虑这点类配合better-scroll
			 -->
		<div class="better-scroll-inner">			
			<!-- 当前城市，仅展示功能，数据从store中获取，响应式改变 -->
			<div class="area">
				<div class="title">当前城市</div>
				<ul class="button-list">
					<li class="button-wrapper">
						<button><!-- 上海 -->{{this.city}}</button>					
					</li>				
				</ul>
			</div>			
			<!-- 热门城市动态数据 -->
			<div class="area">
				<div class="title">热门城市</div>
				<ul class="button-list">
					<li class="button-wrapper"
						v-for="item in hotCities"
						v-bind:key="item.id"
						v-on:click="handleCityClick(item.name)">
						<button>{{item.name}}</button>					
					</li>				
				</ul>
			</div>	
			<!-- 城市字母排序-->		
			<div class="area" 
				v-for="(item,key) in cities" 
				v-bind:key="key" 
				v-bind:ref="key">
				<div class="title border-topbottom">{{key}}</div>
				<ul class="item-list">
					<li class="item border-bottom"  
						v-for="innerItem of item"
            			v-bind:key="innerItem.id"
            			v-on:click="handleCityClick(innerItem.name)">
						{{innerItem.name}}				
					</li>					
				</ul>
			</div><!-- end of area -->
		</div><!-- end of better-scroll-inner -->
	</div><!-- end of city list and better scroll-->
</template>

<script type="text/javascript">
    import BetterScroll from "better-scroll"
    import {
        mapGetters,
        mapActions
    } from 'vuex'
    export default{
        name:"CityList",
        props:["cities","hotCities","letter"],
        data () {
            return {
                msg:"this is city list."
            }
        },
        mounted (){  
            //当dom节点创建完成后生成BetterScroll实例		
            this.scroll = new BetterScroll(this.$refs["city-list"]);
        },
        methods:{
            //业务方法：当点击热门城市或者所有城市中的城市列表时将传入的城市名修改为
            //	当前城市,同时模拟用户点击触发路由
            handleCityClick(city){
                this.setCity(city);
                this.$router.push("/")
            },
            ...mapActions(['setCity'])
        },
        watch:{   
            //此属性有字母表组件传递到父组件city.vue,再传递到本自己，他的变化引起滚动列表滚动
            //	老师这里没有使用状态管理来处理，letter最终来自父组件，当letter改变时当前组件会update
            //	在后续的业务中，字母表会调用父方法改变letter
            letter(val){			
                if(this.letter){
                    const element = this.$refs[this.letter][0]
                    this.scroll.scrollToElement(element)
                }
            }
        },
        computed:{
            ...mapGetters(['city'])
        }
    }
</script>

<style type="text/css" scoped>
/*BFC触发条件以及规则
触发条件：
1.float的值不为none
2.overflow的值不为visible
3.display的值为table-cell、tabble-caption和inline-block之一
4.position的值不为static或则releative中的任何一个
规则：
1.浮动的元素会被父级计算高度（父级触发了BFC）
2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）
3.margin不会传递给父级（父级触发了BFC），两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）
巧妙用法：
清除浮动；
非浮动元素盖住浮动元素，可依靠触发BFC来解决
margin合并情况，在其中一个元素父级触发BFC，将不会合并margin*/

.border-topbottom::before,.border-topbottom::after{
	border-color: #ccc
}
.border-bottom::before{
	border-color: #ccc
}
.city-list{
	overflow: hidden;position: absolute;top: 1.61rem;left: 0;right: 0;bottom: 0;
}
/* 
 *	注意老师这里的设计思路，city-list区块占整个屏幕，然后留出top文职给header和search区域，
 *		over-flow:hidde超出部分隐藏，这样就不会撑开文档流;
 *	老师后面会用一种技术实现内容滚动，但是拆开的内容只是city-list而不是整个body,这样city-list内容滚动时候不会
 *		导致整个页面滚动。
 *	
 *	这种效果更加类似原生app的效果，如果是我们自己开发有两种思路，第一使用框架，使用mui的一个功能，直接套用这种效果；
 *		第二种让头部fixed飘在整个页面上，而主体内容city-list留在文档流中同时设置margin-top=header的height,
 *		会形成与老师这里一样的效果		
 */

.area .title{
	line-height: .54rem;background-color: #eee;padding-left: 0.2rem;color: #666;font-size: .26rem;
}
.area .button-list{
	overflow: hidden; /* 触发bfc,计算内部浮动元素的高度 */
	padding: .1rem;padding-right: 0.6rem;
}
.area .button-list .button-wrapper{
	float: left;width: 31%;margin: 0.02rem;
}
.area .button-list .button-wrapper button{
	padding: 0.1rem;width: 100%;background-color: #fff;border-radius: .06rem;border: 1px solid #ddd;
}
.area .item-list .item{
	line-height: 0.76rem;padding-left:0.2rem;
} 
</style>